<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @click="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="16"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">历史冻结记录</view>
			</view>
			<view class="u-nav-slot rightBtn" slot="right">
				
			</view>
		</u-navbar>

		<view class="detailed-list">
			<view class="detailed-list-item" v-for="(item,index) in 6">
				<view class="list-item-left">
					<view class="title">中粮积分抢购</view>
					<view class="date">2022-08-20 12:14:00</view>
				</view>
				<view class="list-item-left">
					<view class="money">-2000.00</view>
					<view class="balance">冻结</view>
				</view>
			</view>
		</view>
		<view v-show="accountDetails.length == 1" class="noListBox">
			<view class="noData">
				<image class="noDataImg" src="../../static/home/noData.png" mode=""></image>
				<view class="text">暂无数据</view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		getuserbalancelog
	} from '../../api/user.js'
	export default {
		data() {
			return {
				accountDetails: [],
				listQuery: {
					page: 1,
					pageSize: 10,
					pages: 1,
					type: ""
				},
			}
		},
		onShow() {
			this.getNftList();
		},
		filters: {
			setName(type) {
				// 1充值2提现3发售购买4抢购购买5转售购买6抢购退款7转售转让
				let str = "";
				if (type == 1) {
					str = "充值";
				} else if (type == 2) {
					str = "提现";
				} else if (type == 3) {
					str = "购买产品";
				} else if (type == 4) {
					str = "抢购购买";
				} else if (type == 5) {
					str = "转售购买";
				} else if (type == 6) {
					str = "抢购退款";
				} else if (type == 7) {
					str = "转售收益";
				}
				return str;
			}
		},
		methods: {
			setClas(data) {
				let clas = "";
				if (data) {
					if (data < 0) {
						clas = "price1";
					}
				}
				return clas;
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
				 uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			getNftList() {
				this.$nextTick(() => {
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getuserbalancelog(this.listQuery).then(res => {
					this.listQuery.pages = res.data.totalPage;
					if (res.data.rows) {
						this.accountDetails = res.data.rows;
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if (!url) {
					return
				}
				let filePath = url.toLocaleLowerCase();
				if (filePath.indexOf(".mp4") != -1) {
					return false;
				} else {
					return true;
				}
			},
			submitFn() {

			}
		},
		onReachBottom() {
			if (this.listQuery.pages > this.listQuery.page) {
				this.listQuery.page++;
				this.getNftList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.con-box {
		min-height: 100vh;
		padding: 120upx 0upx 0;
		height: 100%;
		background-color: #fff;

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}

		.rightBtn {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.noListBox {
			text-align: center;
			.noData {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 200upx;
				.noDataImg {
					width: 316upx;
					height: 126upx;
				}
				
				.text{
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B0B5BC;
					line-height: 92upx;
				}
			}
		}
		
		.detailed-list{
			width: 100%;
			
			.detailed-list-item{
				width: 100%;
				box-shadow: 1px 0px 1px 0px rgba(51, 51, 51, 0.1);
				padding: 40upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				
				.date{
					margin-top: 20upx;
					font-size: 24upx;
					color: 666;
				}
				
				.money{
					text-align: right;
					font-weight: bold;
				}
				
				.balance{
					margin-top: 20upx;
					font-size: 24upx;
					color: #666666;
					text-align: right;
				}
			}
		}
	}
</style>
